<template>
  <div>
    <div
      class="listItem"
      v-for="item in list"
      :key="item.id"
      @click="toEdit(item)"
    >
      <div class="user">
        <span>{{ item.repairType }}</span>
        <span>维修人员：{{ item.personName }}</span>
      </div>
      <div>
        <van-switch
          v-model="item.isChecked"
          @change="changeSwitch($event, item.id)"
          @click.stop=""
        />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
// import { ref } from "vue";
import { useStore } from "@/store";
import router from "@/router";
import { editOptionStatus } from "@/service/modules/repair";
const emit = defineEmits(["changeStatus"]);
const store = useStore();

defineProps({
  list: Array,
});

const toEdit = (item) => {
  store.commit("setOrg/changeOrg", item.personName);
  store.commit("setOrg/changeId", item.personId);
  router.push(
    "/repairlist/set?repairType=" +
      item.repairType +
      "&status=" +
      (item.status === 1 ? "true" : "false") +
      "&type=sure" +
      "&id=" +
      item.id
  );
};

const changeSwitch = async (status, id) => {
  const { code } = await editOptionStatus({
    id,
    status: Number(status),
  });
  if (code === 0) {
    emit("changeStatus");
  }
};
</script>

<style lang="less" scoped>
.listItem {
  margin-bottom: 16px;
  width: 100%;
  height: 84px;
  border-radius: 8px;
  background: #fff;
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .user {
    display: flex;
    flex-direction: column;
    > span:first-child {
      font-size: 16px;
      line-height: 24px;
      font-weight: 500;
      color: #303233;
    }
    > span:nth-child(2) {
      font-size: 12px;
      line-height: 22px;
      color: #919599;
      margin-top: 6px;
    }
  }
  /deep/ .van-switch {
    width: 48px;
    height: 24px;
    padding: 0 1px;
    .van-switch__node {
      width: 18px;
      height: 18px;
      border-radius: 18px;
      top: 3px;
    }
  }
  /deep/.van-switch--on {
    background: #3e77fa;
  }
}
</style>
